<template>
    <el-dialog
        title="设置二维码信息"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="450px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form ref="form" size="small" :model="form" label-width="80px">
                <el-form-item label="商家:" prop="companyCode">
                    <el-select
                        v-model="form.companyCode"
                        class="item"
                        placeholder="请选择"
                    >
                        <el-option label="全部" value></el-option>
                        <el-option label="启用" value="0"></el-option>
                        <el-option label="停用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型:" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio
                            v-for="(item, index) in typeList"
                            :key="index"
                            :label="item.key"
                            >{{ item.value }}</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注:" prop="remarks">
                    <el-input
                        type="text"
                        v-model="form.remarks"
                        class="item"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="hiddenBg">
            <div id="bgimg">
                <div class="title">在此扫码付款</div>
                <div class="payType">
                    <img
                        src="../../../../../common/pic/wx2.png"
                        style="width: 50px; height: 50px"
                    />
                    <img
                        src="../../../../../common/pic/zfb2.png"
                        style="width: 50px; height: 50px"
                    />
                </div>
                <div id="qrcode">
                    <vue-qr
                        :size="qrcodeVue.size"
                        :text="qrcodeVue.value"
                        :colorLight="qrcodeVue.bgColor"
                        :colorDark="qrcodeVue.fgColor"
                    >
                    </vue-qr>
                </div>
            </div>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="checkSave"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
import vueQr from 'vue-qr'
import OSS from 'ali-oss'
import html2canvas from 'html2canvas'
export default {
    components: {
        vueQr
    },
    props: {
        currRow: Object,
        value: Boolean
    },
    data () {
        return {
            qrcodeVue: {
                size: 250,
                bgColor: '#ffffff',
                fgColor: '#000000',
                // 二维码地址
                value: 'https://www.baidu.com'

            },
            loading: false,
            showValue: false,
            form: {
                companyCode: '',
                payImage: ''
            },
            typeList: [
                { key: 0, value: '收银' },
                { key: 1, value: '其他' }
            ]
        }
    },
    watch: {
        value (val) {
            this.showValue = val
            if (val) {
            }
        },
        showValue (val) {
            this.$emit('update:value', val)
        }
    },
    created () {

    },
    methods: {
        async getOssParms () {
            console.log()
            let params = {
                params: {}
            }
            let ret = await this.$http
                .get(
                    this.$store.state.IP +
                    '/oss/getAuthorizationInfo?path=skinPackage',
                    params
                )
            return ret.body.data
        },
        async fnUploadRequest (option) {
            let vm = this
            // 获取OSS配置信息
            let val = await vm.getOssParms()
            let filename = val.path + '/' + Date.parse(new Date()) + '.zip'
            let client = new OSS({
                region: val.region,
                accessKeyId: val.accessKeyId,
                accessKeySecret: val.accessKeySecret,
                secure: false,
                bucket: val.bucket,
                stsToken: val.securityToken
            })
            let file = option
            let ret = await client.put(filename, file)
            if (ret.res.statusCode === 200) {
                this.form.payImage = ret.res.requestUrls[0]
                this.save()
            } else {
                this.loading = false
                this.$message({
                    showClose: true,
                    message: '图片上传失败',
                    type: 'warning'
                })
            }
        },
        // 下载二维码
        downloadQrcode () {
            html2canvas(document.getElementById('bgimg')).then(canvas => {
                let imgUrl = canvas.toDataURL('image/png')
                console.log(this.dataURItoBlob(imgUrl), '55')
                this.fnUploadRequest(this.dataURItoBlob(imgUrl))
            }).catch()
        },
        // 清空数据
        clearData () {
            this.loading = false
            this.showValue = false
        },
        dataURItoBlob (dataURI) {
            // base64 解码
            let byteString = window.atob(dataURI.split(',')[1])
            let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
            let ab = new ArrayBuffer(byteString.length)
            let ia = new Uint8Array(ab)
            for (let i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i)
            }
            return new Blob([ab], { type: mimeString })
        },
        checkSave () {
            this.loading = true
            if (this.form.payImage) {
                this.save()
            } else {
                this.downloadQrcode()
            }
        },
        // 保存表单
        save () {
            this.loading = true
            this.$http.post(this.$store.state.IP + '/systemRoleManage/roleAddResource', {
                menuId: this.$refs.tree.getCheckedKeys(true),
                roleId: this.roleId,
                id: this.id
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.ret === '0') {
                    this.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$emit('getList')
                    this.clearData()
                }
                if (response.ret !== '0') {
                    console.log('保存失败')
                }
            }, response => {
                console.log('调用保存失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.tip
    color: red
    margin-bottom: 20px

.hiddenBg
    position: fixed
    z-index: -999999
    right: -10000000px

#bgimg
    width: 350px
    height: 400px
    background: #fff
    text-align: center

    // background: url('../../../common/pic/member_default.png')
    // position: absolute
    // z-index: -10000000000
    .title
        height: 50px
        background: #f1b055
        font-size: 20px
        line-height: 50px
        margin-bottom: 20px

    .payType
        display: flex
        align-items: center
        justify-content: space-evenly
</style>